<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        body {
            margin: 0;
        }

        .wrapper {
            width: 600px;
            height: 700px;
            background-color: #f0f0f0;
            padding: 20px 20px;
            margin: 0 auto;
        }

        .message-box {
            height: 170px;
        }

        .message-box textarea {
            width: 600px;
            height: 160px;
            resize: none;
            font-size: 30px;
            outline: none;
            border: 1px solid pink;
        }

        button {
            width: 150px;
            height: 40px;
            cursor: pointer;
            border: 1px solid pink;
            background-color: #fff;
            cursor: pointer;
            float: right;
        }

        .list-box {
            clear: both;
        }

        .list-box ul li {
            width: 600px;
            height: 80px;
            background-color: #fff;
            font-size: 20px;
            padding: 10px 15px;
            box-sizing: border-box;
            border-bottom: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="message-box">
            <textarea class="message-box-input" placeholder="请输入"></textarea>
        </div>
        <div class="btn">
            <button class="button">发布</button>
        </div>
        <div class="list-box">
            <ul>

            </ul>
        </div>
    </div>


    <script>
        // 需求：
        // 1、点击”发布“按钮获取输入域的内容
        // 2、把输入域的内容渲染在列表区域，重置输入域的值
        // 3、点击列表项的”删除“按钮，就可以删除当前的列表项

        var mbInput = document.querySelector(".message-box-input");
        var mbButton = document.querySelector(".button");
        var listBoxEl = document.querySelector(".list-box ul");

        mbButton.onclick = function () {
            var v1 = mbInput.value;
            if (v1.length == 0) {
                console.log("输入域不能为空!");
                return;
            }
            console.log(v1);
            var str = "<span>" + v1 + "</span>";
            var button = document.createElement("button");
            button.innerText = "删除";
            var liCreate = document.createElement("li");
            liCreate.innerHTML = str;
            listBoxEl.appendChild(liCreate);
            liCreate.appendChild(button);
            mbInput.value = "";

            liCreate.onclick = function (event) {
                var ele = event.target;
                console.log(ele);
                // console.log(event.traget.lastElementChild);
                // if(button == "button") {
                //     var ele = liCreate ;
                //     ele.style["display"] = "none";
                // }
                if (ele == button) {
                    // console.log("删除内容");
                    // 找事件源的父元素
                    // 删除内容1
                    // el.parentElement.remove();
                    // 删除内容2
                    listBoxEl.removeChild(ele.parentElement);
                }
            }
        }
    </script>
</body>

</html>